<template>
  <el-dialog
    title="重置密码"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    width="500px"
    custom-class="custom-class-line"
    @close="closeModal">
    <el-form size="small" ref="registerForm" :model="registerForm" :rules="registerRules" class="find-password-mobile-form" label-width="110px" label-position="left">
        <el-form-item prop="mobile" label="手机账号：">
          18312458205
        </el-form-item>
        <el-form-item prop="account" label="账号名：">
          admin
        </el-form-item>
        <el-form-item prop="accountKind" label="账号类型：">
          系统管理员
        </el-form-item>
        <el-form-item prop="creatDate" label="创建日期：">
          20180325
        </el-form-item>
        <el-form-item prop="status" label="账号状态：">
          正常
        </el-form-item>
        <el-form-item prop="password" label="原始密码：">
          <el-input
            style="width:250px"
            v-model="registerForm.password"
            type="password"
            auto-complete="new-password"
            placeholder="原始密码"
            @keyup.enter.native="handleRegister"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="newPassword" label="输入新密码：">
          <el-input
            style="width:250px"
            v-model="registerForm.newPassword"
            type="password"
            auto-complete="new-password"
            placeholder="新密码"
            @keyup.enter.native="handleRegister"
          >
          </el-input>
        </el-form-item>
        <el-form-item prop="confirmPassword" label="重复新密码：">
          <el-input
            style="width:250px"
            v-model="registerForm.confirmPassword"
            type="password"
            auto-complete="new-password"
            placeholder="新密码"
            @keyup.enter.native="handleRegister"
          >
          </el-input>
        </el-form-item>
        <div class="text-center">
          <el-form-item label="" label-width="0">

            <el-button
              :loading="loading"
              type="primary"
              style="width:100px;"
              @click.native.prevent="handleRegister"
            >
              <span>确定修改</span>
            </el-button>
            <el-button
              type="cancel"
              style="width:100px;"
              @click="closeModal"
            >
              <span>取消</span>
            </el-button>
          </el-form-item>
        </div>
    </el-form>
  </el-dialog>
</template>

<script>
import { getCodeImg } from "@/api/login";

export default {
  name: "updatePassword",
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.registerForm.password !== value) {
        callback(new Error("新密码和原始密码输入不一致"));
      } else {
        callback();
      }
    };
    const equalToNewPassword = (rule, value, callback) => {
      if (this.registerForm.newPassword !== value) {
        callback(new Error("新密码两次输入不一致"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        password: "",
        newPassword: "",
        confirmPassword: "",
      },
      registerRules: {
        password: [
          { required: true, trigger: "blur", message: "请输入原始密码" },
        ],
        newPassword: [
          { required: true, trigger: "blur", message: "请输入新密码" },
          { min: 5, max: 16, message: '密码5~16位，数字、字母、数字/字母+字符', trigger: 'blur' },
          { required: true, validator: equalToPassword,trigger: "blur" }
        ],
        confirmPassword: [
          { required: true, trigger: "blur", message: "请再次输入新密码" },
          { min: 5, max: 16, message: '密码5~16位，数字、字母、数字/字母+字符', trigger: 'blur' },
          { required: true, validator: equalToNewPassword,trigger: "blur" }
        ],
      },
      loading: false,
      dialogVisible: false
    };
  },
  created() {
  },
  methods: {
    showModal() {
      this.dialogVisible = true
    },
    closeModal() {
      this.dialogVisible = false
      this.$emit('close')
    },
    handleRegister() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
        }
      });
    },
  }
};
</script>

<style rel="stylesheet/scss" lang="scss">
</style>
